<template>
  <div class="login-container">
    <el-form class="login-form" ref="login-form" :model="user" :rules="formRules" v-if="!flag_">
      <div class="login-head">
        <img src="https://pic.imgdb.cn/item/63ecc611f144a010072d0971.png">
      </div>
      <div class="login-top">用户登录</div>
      <el-form-item class="el-form-one" prop="username">
        <el-input  prefix-icon="el-icon-user" v-model="user.username" placeholder="请输入学号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input  prefix-icon="el-icon-lock" v-model="user.password" placeholder="请输入密码" show-password
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="checked"></el-checkbox>
        <el-tooltip content="点击查看《用户协议》" placement="right" effect="light">
        <el-button type="text" @click="agree_text = true" class="agree_text">我已阅读并同意《用户协议和隐私条款》</el-button>
      </el-tooltip>
      </el-form-item>
      <el-form-item>
        <Debounce :time="2000" events="click">
          <el-button class="login-btn" @click.native="onLogin" :loading="loadingtext">{{loginText}}</el-button>
          </Debounce>
      </el-form-item>
        <el-row class="login-bottom">
            <el-link type="primary" :underline="false" @click="forgetPassword" :plain="true">忘记密码</el-link>
            <el-link type="primary" @click="doRegister()" :underline="false">用户注册</el-link>
        </el-row>
    </el-form>
    <el-form class="login-form" ref="regist-form" :model="register" :rules="formRules_" v-if="flag_">
      <div class="login-head">
        <img src="https://pic.imgdb.cn/item/63ecc611f144a010072d0971.png">
      </div>
      <div class="login-top">用户注册</div>
      <el-form-item class="el-form-one" prop="username">
        <el-input auto-complete="new-password" prefix-icon="el-icon-user" v-model="register.username" placeholder="请输入学号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input auto-complete="new-password" prefix-icon="el-icon-lock" v-model="register.password" placeholder="请输入密码" show-password
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="login-btn" @click="registBtn">注册</el-button>
      </el-form-item>
      <el-row class="login-bottom">
          <el-link type="primary" @click="turn_back()" :underline="false">已有账号，返回登录</el-link>
      </el-row>
    </el-form>
    <el-dialog
      title="《用户协议和隐私条款》"
      :visible.sync="agree_text"
      width="30%"
      center>
      <div class="agreement"><span>在此特别提醒您(用户)在登录之前,请认真阅读本《用户协议和隐私条款》(以下简称"协议")，确保您充分理解本协议中各条款。请您审慎阅读并选择接受或不接受本协议。您的登录、使用等行为将视为对本协议的接受，并同意接受本协议各项条款的约束。本协议约定“小柚智汇”团队(以下简称"团队")与用户之间关于"小柚智汇"软件服务(以下简称"服务")的权利义务。"用户"是指登录、使用本服务的个人。本协议可由团队随时更新，更新后的协议条款一旦公布即代替原来的协议条款，恕不再另行通知，用户可在本软件中查阅最新版协议条款。在修改协议条款后，如果用户不接受修改后的条款，请立即停止使用软件提供的服务，用户继续使用服务将被视为接受修改后的协议。</span>
        一、用户须知<br>
        <span> 1、用户在使用本服务前需要使用个人账号和密码，用户愿意承担登录带来的风险。</span>
        <span> 2、用户理解并同意,团队有权依合理判断对违反有关法律法规或本协议规定的行为进行处罚，对违法违规的任何用户采取适当的法律行动,并依据法律法规保存有关信息向有关部门报告等，用户应承担由此而产生的一切法律责任。</span>
        <span> 3、用户理解并同意，因用户违反本协议约定，导致或产生的任何第三方主张的任何索赔、要求或损失，包括合理的律师费，用户应当赔偿星与合作公司、关联公司，并使之免受损害。</span><br>
        二、用户行为规范
        <span>用户不得利用平台账号或本服务制作、上载、复制、发布、传播如下法律、法规和政策禁止的内容:</span>
        <span>(1)反对宪法所确定的基本原则的;</span>
        <span>(2)危害国家安全,泄露国家秘密，颠覆国家政权，破坏国家统一的;</span>
        <span>(3)损害国家荣誉和利益的;</span>
        <span>(4)煽动民族仇恨、民族歧视，破坏民族团结的;</span>
        <span>(5)破坏国家宗教政策，宣扬邪教和封建迷信的;</span>
        <span>(6)散布谣言，扰乱社会秩序，破坏社会稳定的;</span>
        <span>(7)散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的;</span>
        <span>(8)侮辱或者诽谤他人，侵害他人合法权益的;</span>
        <span>(9)含有法律、行政法规禁止的其他内容的信息。</span><br>
        三、使用规则<br>
        <span>1、用户不得利用账号或本服务进行如下行为:</span>
        <span> (1)提交、发布虚假信息</span>
        <span> (2)利用技术手段盗取他人账号;</span>
        <span> (3)利用账号或本服务从事任何违法犯罪活动的;</span>
        <span> (4)制作、发布与以上行为相关的方法、工具，或对此类方法、工具进行运营或传播，无论这些行为是否为商业目的;</span>
        <span> (5)其他违反法律法规规定、侵犯其他用户合法权益、干扰软件正常运营或服务未明示授权的行为。</span>
        <span> 2、用户须对利用软件账号或本服务传送信息的真实性、合法性、无害性、准确性、有效性等全权负责,与用户所传播的信息相关的任何法律责任由用户自行承担，与软件无关。
        如因此给软件或团队造成损害的，用户应当依法予以赔偿。</span><br>
        四、其他<br>
        <span>1、团队郑重提醒用户注意本协议中免除团队责任和限制用户权利的条款,请用户仔细阅读，自主考虑风险。未成年人应在法定监护人的陪同下阅读本协议。</span>
        <span>2、本协议的效力、解释及纠纷的解决，适用于中华人民共和国法律。若用户和瞄星之间发生任何纠纷或争议，首先应友好协商解决，协商不成的，用户同意将纠纷或争议提交团队住所地有管辖权的人民法院管辖。</span>
        <span>3、本协议的任何条款无论因何种原因无效或不具可执行性，其余条款仍有效，对双方具有约束力。</span>
        <span>本《协议》版权由团队所有，团队保留一切对本《协议》解释的权利。</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="agree_text = false">我不同意</el-button>
        <el-button type="primary" @click="onchange()">我已阅读并同意</el-button>
      </span>
    </el-dialog>
    <span class="text">乳腺病灶分割系统</span>
    <div class="text_contain">
      <span class="text1">医疗</span><br>
      <span class="text2">技术</span><br>
      <span class="text3">算法</span>
    </div>
    <div class="test_id">
      <span>体验用户</span>
      <p>账号：04198888</p>
      <p>密码：123456</p>
    </div>
  </div>
</template>

<script>
import { login, regist } from '@/utils/api/user'
import '@/utils/plugins/debounce'
export default {
  name: 'login-vue',
  props: {},
  data () {
    return {
      loginText: '登录',
      loadingtext: false,
      flag_: false,
      agree_text: false, // 同意的对话框
      checked: false, // 协议是否选中
      user: {
        username: '',
        password: ''
      },
      register: {
        username: '',
        password: ''
      },
      formRules: {
        username: [
          { required: true, message: '学号不能为空', trigger: 'blur' },
          { pattern: /^\d{8}$/, message: '请输入正确的八位数字学/工号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      },
      formRules_: {
        username: [
          { required: true, message: '学号不能为空', trigger: 'blur' },
          { pattern: /^\d{8}$/, message: '请输入正确的学工号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: blur },
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/, message: '密码由6-16位的字母和数字组成', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 忘记密码
    forgetPassword () {
      this.$message({
        message: '忘记密码后请联系管理员！',
        type: 'warning'
      })
    },
    onchange () {
      this.checked = true
      this.agree_text = false
    },
    onLogin () {
      // 表单验证
      this.$refs['login-form'].validate(valid => {
        if (!valid) {
          return
        }
        this.login()
      })
    },
    // 注册
    registBtn () {
      // 表单验证
      this.$refs['regist-form'].validate(valid => {
        if (!valid) {
          return
        }
        // 注册
        regist(this.register).then(res => {
          if (res.data.data) {
          // 成功
            this.$notify({
              title: '成功',
              message: '注册成功，请登录',
              type: 'success'
            })
          } else {
          // 已经被注册
            this.$notify({
              message: '该用户名已被注册',
              type: 'warning'
            })
          }
        })
      })
    },
    login () {
      if (this.checked === false) {
        this.$message.error('请勾选《用户协定和隐私条款》')
      } else {
        // 开启登录
        this.loadingtext = true
        this.loginText = '登录中...'
        login(this.user).then(res => {
          if (res.data.code === 200) {
            this.loadingtext = false
            this.loginText = '登录'
            // 登录成功
            this.$message({
              type: 'success',
              message: '登录成功'
            })
            // 将接口返回的用户存储到本地方便应用
            window.sessionStorage.setItem('user', JSON.stringify(res.data.data))
            // 通过编程式导航跳转到后台主页
            this.$router.push('/page')
          } else {
            this.$message.error('登录失败，账号或密码错误')
            this.loadingtext = false
            this.loginText = '登录'
          }
        })
      }
    },
    doRegister () {
      this.flag_ = true
    },
    turn_back () {
      this.flag_ = false
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: url('https://pic.imgdb.cn/item/63ecc581f144a010072be19a.png') no-repeat;
  justify-content: center;
  align-items: center;
  background-size: cover;
  .login-nav img{
    position: absolute;
    top: 20px;
    left: 50px;
    width: 300px;
    margin: 0 auto;
    opacity: 0.6;
    background-size:100%;
    border-radius: 50%;
  }
  .goback{
    position: absolute;
    right: 50px;
    top: 30px;
  }
  .login-head{
      height: 130px;
      width: 130px;
      border-radius: 50%;
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      top: -60px;
      left: -60px;
      img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-color: #fff;
        }
     }
  .login-form {
    position: relative;
    // background-color: 85BEF2;
    padding: 30px;
    min-width: 300px;
    border-radius: 10px;
    box-shadow: 0 15px  25px rgba(0,0,0,.5);
    .login-top{
      text-align: center;
      color: black;
      font-size: 25px;
    }
    .el-form-one {
      margin-top: 22px;
    }
    .el-form-item {
      margin-bottom: 19px;
    }
    .el-checkbox {
      color: #4D77FF;
    }
    .login-btn {
      width: 50%;
      margin-left: 75px;
      font-size: 20px;
      background-color: #4D77FF;
      color: white;
    }
    .login-btn:hover{
      opacity: 0.7;
    }
    .login-bottom{
      text-align: center;
      margin-top: -10px;
      .el-link.el-link--primary{
        color: black;
        margin-left: 10px;
      }
    }
  }
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background-color: #4D77Ff;
  border-color: #4D77Ff;
}
/deep/.el-input{
  width: 80%;
  margin-left: 30px;
}
/deep/.el-input--prefix .el-input__inner{
  padding-left: 34px;
}
.text{
  color: #4D77Ff;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 40px;
  line-height: 35px;
  font-size: 2.5rem;
  font-weight: bold;
  font-family: 幼圆;
  letter-spacing: 2px;
}
.text_contain{
  letter-spacing: 2px;
  width: 220px;
  position: absolute;
  left: 150px;
  top: 400px;
  transform: rotate(-15deg);
  font-family: 幼圆;
  font-size: 2.2rem;
  line-height: 2.8rem;
  color: #4D77Ff;
  .text2,.text3{
    position: absolute;
  }
  .text2{
    left: 2.2rem;
  }
  .text3{
    left: 4.3rem;
  }
}
.agree_text{
  margin-left: 5px;
  color: rgb(29, 28, 28);
  font-size: 13px;
  cursor: pointer;
}
.el-checkbox{
  margin-left: 25px;
}
.agreement{
  text-align: justify;
  line-height: 20px;
  letter-spacing: 1px;
  width: 300px;
  margin: 0 auto;
  span{
    display: block;
    text-indent: 2rem;
  }
}
/deep/.el-dialog__header{
  padding-bottom: 0;
  padding-top: 30px;
}
/deep/.el-dialog--center .el-dialog__body{
  padding-top: 20px;
}
/deep/.el-button--primary{
  background-color: #4D77Ff;
  border: none;
}
/deep/.el-button--primary:hover{
  opacity: 0.8;
}
/deep/.el-button--default:hover{
  color: white;
  background-color: red;
}
.test_id{
  position: absolute;
  right: 100px;
  width: 150px;
  height: 80px;
  padding: 10px 0;
  text-align: center;
  border: 2px #02325E solid;
  border-radius: 20px;
  span,p{
    font-size: 14px;
    color: black;
  }
}
</style>
